<template>
    <div class="content banner-box">
        <div class="left-box">
            <div class="title-box">
                产品系列
            </div>
            <div class="item-box">
                <div class="item" v-for="(item, index) in MaxData" :key="index" @click="gotoChanpin(item.record_id)">
                    {{ item.title }}
                </div>
            </div>
        </div>
        <div class="right">
            <div class="top-box">
                <div class="left-img-box">
                    <div class="img-box">
                        <img v-if="img" :src="base64Img(img)" alt="">
                    </div>
                    <div class="img-list">
                        <div class="item" @click="clickImg(item)" v-for="(item, index) in data.img_name" :key="index">
                            <img :src="base64Img(item)" alt="">
                        </div>
                    </div>
                </div>
                <div class="xiangqing-box">
                    <div class="title">
                        {{ data.title }}
                    </div>
                    <div class="title2">
                        {{ data.producModel }}
                    </div>
                    <div class="title3">
                        {{ data.productLittileText }}
                    </div>
                    <div class="tel-box">
                        <p>咨询服务电话：{{ webMessage.tel1 }}</p>
                    </div>
                </div>
            </div>
            <div class="message-box">
                <div class="first-box">
                    <p>一、产品特点</p>
                    <div v-html="data.productMaxText">
                    </div>
                </div>
                <div>

                    <p>
                        二、技术参数
                    </p>
                    <div class="img">
                        <img v-if="data.img" :src="base64Img(data.img)">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { onMounted, ref, watch } from 'vue'
import { getLeftList, getChanPinXiangqing, getWebXinxi } from '@/api/viewapi.js'
import { useRoute } from 'vue-router';
import { base64Img } from '@/tools/tools.js'
import router from '@/router/index.js';

const MaxData = ref([])
const route = useRoute();
const img = ref('')
const data = ref({})
const webMessage = ref({})
// 跳转详情
const gotoChanpin = (id) => {
    router.push({ path: '/chanpinlist', query: { id: id } })
}



const _getLeftList = () => {
    getLeftList().then((res) => {
        MaxData.value = res.data.data
        console.log('全部产品', res.data.data);
    })
}

const _getChanPinXiangqing = (id) => {
    getChanPinXiangqing(id).then((res) => {
        data.value = res.data
        img.value = res.data.img_name[0]

        console.log(res);
    })
}

const clickImg = (data) => {
    img.value = data
}

const getWebMessage = () => {
    getWebXinxi().then((res) => {
        webMessage.value = res.data.data
        console.log(res);
    })
}


onMounted(() => {
    getWebMessage()
    _getLeftList()
    let id = route.query.id
    _getChanPinXiangqing(id)
})
</script>
<style lang="scss" scoped>
// 取消显示手机端 显示pc端
@media (min-width: 800px) {
    .content {
        display: flex;
        padding-top: 20px;
        padding-bottom: 20px;
        justify-content: space-between;

        .left-box {
            width: 260px;

            .title-box {
                text-align: center;
                font-size: 26px;
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
                padding: 20px;
                line-height: 40px;
                color: white;
                background-color: rgb(0, 160, 233);
                font-weight: 800;
            }

            .item-box {
                .item {
                    padding: 20px;
                    cursor: pointer;
                    font-weight: 800;
                    background-color: rgb(245, 248, 250);
                    border-bottom: 1px solid gainsboro;
                }

                .item:hover {
                    background-color: rgb(80, 88, 95);
                    color: rgb(248, 248, 248);
                }
            }
        }

        .right {
            width: 1120px;
            display: flex;
            flex-direction: column;

            .top-box {
                display: flex;
                border-bottom: 1px solid gainsboro;

                .left-img-box {

                    .img-box {
                        border: 1px solid gainsboro;
                        padding: 20px;

                        img {
                            width: 500px;
                            height: 400px;
                        }
                    }

                    .img-list {
                        padding: 10px 0;
                        display: flex;

                        .item {
                            margin-right: 10px;

                            img {
                                width: 110px;
                                height: 96px;
                            }
                        }
                    }
                }

                .xiangqing-box {
                    margin-left: 10px;
                    padding: 40px;
                    background-color: rgb(235, 243, 247);
                    width: 100%;
                    margin-bottom: 10px;

                    .title {
                        font-size: 28px;
                        font-weight: 800;
                    }

                    .title2 {
                        margin-top: 10px;
                        font-size: 22px;
                        font-weight: 800;
                    }

                    .title3 {
                        padding-top: 20px;
                        overflow: hidden;
                        font-size: 16px;
                        line-height: 16px;
                        height: 174px;
                        text-indent: 2em;
                        line-height: 28px;
                    }

                    .tel-box {
                        margin-top: 40px;

                        p {
                            line-height: 34px;
                        }
                    }
                }
            }

            .message-box {
                margin-top: 20px;
                padding: 10px 0;
                display: flex;
                .first-box {
                    margin-right: 10px;
                }
                p {
                    line-height: 60px;
                    font-size: 20px;
                    display: block;
                    border-bottom: 1px solid gainsboro;
                    margin-bottom: 6px;
                }

                .img {
                    img {
                        max-width: 800px;
                        min-height: 100px;
                    }
                }
            }
        }
    }
}

// 取消显示pc端 显示手机端
@media screen and (max-width: 799px) {

    .content {
        .left-box {
            display: none;
        }

        .right {
            padding: 10px;

            .top-box {
                .left-img-box {
                    .img-box {
                        display: flex;
                        justify-content: center;

                        img {
                            width: 440px;
                            height: 300px;
                        }
                    }

                    .img-list {
                        display: flex;

                        .item {
                            margin-top: 10px;
                            margin-right: 4px;

                            img {
                                width: 140px;
                                height: 100px;
                            }
                        }
                    }
                }

                .xiangqing-box {
                    display: none;
                }
            }

            .message-box {
                img {
                    width: 100%;
                }

                p {
                    line-height: 40px;
                    font-size: 22px;
                }
            }
        }
    }
}
</style>